<template>
  <ul class="list">
    <li class="item"
        v-for="item of letters"
        :key="item"
        :ref="item"
        @click="handleLetterClick"
        @touchstart.prevent="handleTouchStart"
        @touchmove="handleTouchMove"
        @touchend="handleTouchEnd"
    >
      {{item}}
    </li>
  </ul>
</template>

<script>
    export default {
      name: 'CityAlphabet',
      props:{
        cities:Object
      },
      computed:{
        letters (){
          const letters = []
          for(let i in this.cities){
            letters.push(i)
          }
          return letters
        }
      },
      data (){
        return{
          touchStatus:false,
          startY:0,
          timer:null,
        }
      },
      updated (){
        this.startY = this.$refs['A'][0].offsetTop
      },
      methods:{
        handleLetterClick (e){
          this.$emit('change',e.target.innerText)
        },
        handleTouchStart (){
          this.touchStatus = true
        },
        handleTouchMove (e){
          if(this.touchStatus){
            if(this.timer){
              clearTimeout(this.timer)
            }
            this.timer = setTimeout(()=>{
              const touchY = e.touches[0].clientY-79        //获取手指距列表的高度
              const index = Math.floor((touchY-this.startY)/20)
              if(index >= 0 && index < this.letters.length){
                this.$emit('change',this.letters[index])
              }
            },16)
          }
        },
        handleTouchEnd (){
          this.touchStatus = false
        }
      },
    }
</script>

<style lang="stylus" scoped>
  @import '~styles/varibles.styl'
  .list
    display :flex
    flex-direction :column
    justify-content :center
    position :absolute
    top:1.58rem
    right :0
    bottom :0
    width :.4rem
    .item
      line-height :.4rem
      text-align :center
      color :$bgColor
</style>
